<template>
	<view class="container">
		<view class="input_content">
			<view class="input_content_textarea">
				<textarea v-model="formData.name" placeholder="请输入分类" placeholder-class="placeholderStyle" maxlength="12"/>
				<view><text v-if="formData.name">{{formData.name.length}}</text><text v-else>0</text>/12</view>

			</view>

			<view class="input_content_photo">
				<view v-if="formData.img" class="input_content_photo_adPh">
					<image class="photos" :src="formData.img"></image>
					<view class="input_content_photo_adPh_jiao" @click="deleteImage"><image src="../static/images/close.png" mode=""></image></view>
				</view>
				<view v-else class="input_content_photo_adPh" @click="clk">
					<view><image src="../static/images/creamer.png" mode="widthFix"></image></view>
					<view>添加图片</view>
				</view>
			</view>
		</view>
		<view class="list_content">
			<view class="list_item">
				<text class="list_item_title">上级分类</text>
				<picker @change="bindPickerChange" :range="classifyArr" range-key="cateName">
					<input placeholder="请选择上级分类" type="text" disabled readonly v-model="parentClassify">
					<view class='iconfont icon-jiantou'></view>
				</picker>
			</view>
			<view class="list_item">
				<view class="list_item_title">是否显示</view>
				<view class="input_class">
					<view class="input_class_con">
						<switch :checked="is_show" @change="is_show = !is_show" color="#E93323" style="transform:scale(0.8)" />
					</view>
				</view>
			</view>
		</view>
		<view class="handle">
			<view class="handle_button" @click="submit">
				确定
			</view>
		</view>
	<avatar @upload="doUpload" @getName="getImgName" quality="1" ref="avatar" selWidth="250upx" selHeight="250upx"></avatar>
	</view>
</template>

<script>
	import avatar from "@/components/yq-avatar/yq-avatar.vue";
import { shopCateDetail, shopCateSubmit, shopCateList } from "@/utils/api/admin";
	// import { navigateTo, setStorage, getStorage, removeStorage, navigateBack, Toast,Loading, hideLoading, Modal  } from '@/utils/libs/uniApi.js';
const $ = require('@/utils/api.js');
export default {
	components: {
		avatar
	},
	data() {
		return {
				imgName: "",
			parentClassify: '',
			formData: {
				cateName: '',
				pic: '',
				pid: '',
				is_show: 1,
				sort: 0
			},
			is_show: true,
			index: 0,
			mer_id: '',
			pid: '',
			classifyArr: [],

		}
	},
	onLoad(options) {
		this.mer_id = options.mer_id
		this.id = options.id
		this.getCateList()
		if(this.id) this.getCateDetail()

	},
	onShow() {

	},
	onReady() {

	},
	methods: {
		bindPickerChange: function(e) {
			let idx = e.target.value
			this.formData.pid = this.classifyArr[idx]['store_category_id']
			this.parentClassify = this.classifyArr[idx]['cateName']
		},
		getCateList(){
			shopCateList(this.mer_id)
				.then(res => {
					this.classifyArr = res.data
					this.classifyArr.unshift({cateName: '顶级分类', store_category_id: 0, children: []})
					if(!this.pid){this.pid = 0;this.parentClassify = this.getStorCateName(0, this.classifyArr)}
				})
				.catch(res => {
					this.Tips({
						title: res
					});
				});
		},
		//获取分类详情
		getCateDetail(){
			let that = this
			uni.showLoading({
				title: '加载中'
			});
			shopCateDetail(that.mer_id,that.id)
				.then(res => {
					uni.hideLoading();
					let data = res.data
					that.formData = data
					that.status = data.status == 1;
					that.parentClassify = that.getStorCateName(data.pid, that.classifyArr)
				})
				.catch(res => {
					that.Tips({
						title: res
					});
				});
		},
		//获取店铺分类名称
		getStorCateName(id, arr) {
			for (let i = 0; i < arr.length; i++) {
				if (arr[i].store_category_id === id) {
					return arr[i]['cateName']
				}
			}
		},
		clk() {
			let avatar = this.$refs.avatar;
			avatar.fChooseImg(1,{selWidth: '350upx', selHeight: '350upx', inner: true});
		},
		getImgName(name){
			this.imgName = name
		},
		doUpload(rsp) {
			let that = this

			$.uploadimgfilepath({
				filePath:rsp.path,
				success(res) {

								  that.$set(that.formData,'img',res.imgUrl);
				}
			})


		},
		handleChooseImage() {
			let that = this;

			that.$util.uploadImageOne('upload/image', function (res) {
			  that.$set(that.formData,'img',res.data.path);
			});
		},
		// 删除图片
		deleteImage(index) {
			this.formData.pic ="";
		},
		submit(){
			let that = this;


			if (!that.formData.name) return that.Tips({
				title: '请输入分类名称'
			});
			console.log(that.formData);
			shopCateSubmit(that.mer_id,that.formData).then(data => {
					console.log("data",data)
				if (data.code == 200) {
					console.log("data",data)
					// that.Tips({
					// 	title: data.message
					// });
					//
					that.Modal(data.message, '点击确定关闭', {
						showCancel: false,
					}).then(() => {
						// uni.redirectTo({
						// 	url:'/pages/home/index'
						// })
					})
					// setTimeout(()=>{
					// 	uni.redirectTo({
					// 		url: "/pages/product/shopcateAdmin/index?mer_id="+that.mer_id
					// 	})
					// },1000)
				}
			}).catch(res => {
					console.log("res",res)
				that.Tips({
					title: res
				});
			})


		}
	}
};
</script>

<style lang="scss" scoped>
@import './scss/addShopcate.scss';
.uni-input-placeholder {
	color: #BBBBBB;
}
</style>
